امروز با در خواست یکی از بازدید کنندگان در مورد خاصیت float و جاوا اسکرپت صحبت میکنیم. احتمالاً با خاصیت float در CSS آشنایی دارید. این خاصیت به ویژه وقتی مورد استفاده قرار میگیرد که طراح قصد داشته باشد بدون استفاده از جدولها چهارچوب صفحه را طراحی کند.
این خاصیت باعث میشود تا یک بلوک HTML بسته به مقداری که به این ویژگی داده میشود تا حد امکان در سمت چپ یا راست المنت والد آن نمایش داده شود، به طوری که سایر المنتها و متن موجود در المنت والد در اطراف بلوک مورد نظر قرار گیرند. توضیح بیشتر در مورد این خاصیت مربوط به بخش آموزش CSS هست بنابراین به همین مقدار توضیح بسنده میکنیم.
برای اختصاص دادن یک ویژگی CSS به المنتهای HTML از شیء style استفاده می شود. اما این نکته را باید در نظر داشته باشیم که float از کلمات کلیدی رزرو شده در جاوا اسکرپت است. به همین دلیل نمیتوانیم از متد style.float برای این منظور استفاده کنیم.
برای جلوگیری از تداخل بین float مورد استفاده در CSS و کلمه کلیدی float در جاوا اسکرپت به منظور اختصاص این ویژگی به المنتهای HTML از متد cssFloat استفاده میکنیم. برای درک بهتر میتوانید به مثال زیر در دو حالت قبل و بعد از اختصاص این ویژگی با به المنت توجه کنید:
بلوک مورد نظر قبل از اختصاص ویژگی
این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود
قبل از اختصاص ویژگی float:
بلوک مورد نظر قبل از اختصاص ویژگی
این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود
کد مربوط به اعمال ویژگی با استفاده از جاوا اسکرپت:
بلوک مورد نظر قبل از اختصاص ویژگی
این متن قبل از اختصاص ویژگی به المنت در زیر بلوک نمایش داده میشود
و در انتها این چیزی هست که در مرورگر نمایش داده خواهد شد:
بلوک مورد نظر پس از اختصاص ویژگی
این متن پس از اختصاص ویژگی به المنت در کنار بلوک نمایش داده میشود
مقادیر زیر را میتوان برای متد cssFloat به کار برد:
noen :
این مقدار پیش فرض متد هست و تأثیر float را بر روی المنت خنثی میکند.
right :
این مقدار باعث می شود تا بلوک مورد نظر تا حد امکان در سمن راست المنت والد خود قرار گیرد.
left :
این مقدار باعث میشود تا بلوک مورد نظر تا حد امکان در فضای سمت چپ المنت والد خود قرار گیرد.
در پایان این مقاله باید به این نکته اشاره کنم که مقادیر متد cssFloat از نوع رشته ای (String) هستند پس باید در کد جاوا اسکرپت در کوتیشن نوشته شوند.
بیایید فرض کنیم می خواهیم نام فردی را قبل از ورود به صفحه بپرسیم و سپس نام آنها را در صفحه برای خودشان نمایش دهیم. این کار را با استفاده از جاوااسکرپت می توان انجام داد. فرمانی که برای این کار استفاده می شود به این صورت است:
prompt('سؤال شما', ' ');
این فرمان یک پنجره را قبل از باز شدن صفحه نمایش می دهد که سؤال شما در آن پرسیده می شود و بیننده می تواند جواب خود را در کادری که برای او در نظر گرفته شده بنویسد. دو سینگل کوت بعدی جواب پیش فرض شما برای سؤال است. اگر شما چیزی بین این دو سینگل کوت ننویسید، بیننده با یک لیست خالی، آماده برای نوشتن مواجه می شود. این پیغام قبل از بارگذاری صفحه نمایش داده می شود پس شما می توانید پاسخ بیننده را در صفحه نمایش دهید.
اگر مثالی در این مورد می خواهید لینک زیر را کلیک کنید. در صفحه مثال نام شما پرسیده می شود و پس از وارد کرده آن، نام شما در صفحه جدید نمایش داده می شود:
حالا به سراغ اسکرپتی که این کار را انجام می دهد می رویم. توجه داشته باشید که دستورات prompt و if/else در بخش HEAD صفحه وارد می شوند ولی نام کاربر در بخش BODY صفحه مشاهده می شود.
اولین چیزی که اتفاق می افتد این است که متغیر yourname مقداری را که کاربر برای آن وارد می کند به خود می گیرد. پس مقدار متغیر yourname معادل استرینگی است که نام کاربر را می سازد.
دستور if/else نام « ناشناس » را در صورتی که کاربر نامی را وارد نکند به عنوان مقدار متغیر yourname قرار می دهد. این دستور چک می کند که اگر نامی وارد نشود (null) و یا اگر فضای خالی وارد شود، مقدار « ناشناس » را به متغیر yourname می دهد.
در بخش body متن دوباره از تگ script استفاده می کنیم تا کدهای جاوا اسکرپت از بقیه متن html متمایز شود. در این قسمت ما از یک فرمان جدید یعنی ;(" ")document.write استفاده کرده ایم. این همان چیزی است که به متغیر yourname اجازه نوشته شدن در صفحه html را می دهد. ما در این پیغام دو استرینگ را به علاوه متغیر yourname در صفحه می نویسیم. متغیر yourname در این فرمان بین دو دابل کوت قرار نمی گیرد چون یک مقدار است نه یک استرینگ، (البته مقدار متغیر yourname یک استرینگ است). به دلیل اینکه متغیر yourname یک استرینگ نیست ما از دو علامت بعلاوه در ابتدا و انتهای آن استفاده می کنیم. این سری نوشته ها مرورگر را وادار می کند ابتدا یک استرینگ سپس مقدار متغیر و سپس استرینگ دوم را بنویسد. چون ما در حال نوشتن یک کد جاوا اسکرپت هستیم برای اینکه بتوانیم متنی را در صفحه بنویسیم نمی توانیم مانند نوشتن متن در html عمل کنیم، و باید متن مورد نظر را بین دابل کوت و در قالب استرینگ در صفحه بنویسیم.
شاید متوجه شده باشید تگهای پایانی h1 و center به گونه ای متفاوت با قبل نوشته شده اند (
). این تفاوت بدین دلیل است که اسلش در جاوا اسکرپت به معنای تقسیم است و برای جلوگیری از اشتباه شدن آن با علامت تقسیم از یک بک اسلش قبل از آن استفاده می کنیم. در نتیجه استفاده از یک بک اسلش ( \ ) و بلافاصله بعد از آن یک اسلش ( / )
مرورگر ها به صورت پیش فرض آدرس و حتی خود صفحاتی را که کاربر مشاهده می کند ذخیره می کنند. این آدرسها به ترتیبی که کاربر آنها را مشاهده کرده است در تاریخچه (history) مرورگر ثبت می شوند و دکمه های Back و Forward پنجره مرورگر بر اساس این تاریخچه کار می کنند. با استفاده از جاوا اسکرپت می توانیم به این تاریخچه دسترسی داشته باشیم و با کمک آن مسیر کاربران را هدایت کنیم.
ما برای کار با تاریخچه مرورگر در اینجا از دکمه های HTML استفاده می کنیم که با کمک رویداد onclick در هنگام کلیک کردن روی این دکمه ها دستورات مورد نظر ما اجرا خواهند شد. در اینجا می توانید کد HTML مربوط به ساخت این دکمه ها را مشاهده کنید (البته مقدار مربوط به شناسه onclick مربوط به دستورات جاوا اسکرپت است که بعداً وارد خواهد شد) :
دستورات مختلفی برای کار با تاریخچه مرورگر وجود دارد که همه آنها از شیء history استفاده می کنند. در ادامه می توانید تعدادی از این دستورات را که با بیشتر مرورگرها کار می کنند مشاهده کنید
history.back()
از این فرمان می توانید جهت هدایت کاربران به صفحه ای که قبل از صفحه کنونی در پنجره مرورگر مشاهد کرده اند استفاده کنید. این دستور دقیقاً مانند دکمه Back در پنجره مرورگر عمل می کند و در صورتی که صفحه کنونی اولین صفحه ای باشد که از زمان باز شدن پنجره نمایش داده شده باشد این دستور کاربردی ندارد. برای مشاهده یک نمونه از کاربرد این دستور می توانید لینک را کلیک کنید :
در اینجا می توانید کئ مورد استفاده در مثال بالا را مشاهده کنید :
history.forward()
در صورتی که بازدید کننده قبلاً از دکمه Back در مرورگر خود استفاده کرده باشد یا با استفاده از دستور
()history.back به صفحه قبلی باز گشته باشد می توانیم از دستور ()history.forward برای هدایت بازدید کننده به صفحه ای که پس از صفحه کنونی باز کرده است استفاده کنیم. این دستور کاربردی مشابه دکمه Forward در پنجره مرورگر دارد و کاربرد آن عکس کاربرد ()history.back است.
دکمه زیر با استفاده از دستور ()history.forward شما را به صفحه ای که برای مثال مربوط به بازگشت به صفحه قبلی مشاهده کرده اید هدایت می کند :
می توانید کد استفاده شده در ساخت دکمه بالا را در اینجا مشاهده کنید :
history.go()
با استفاده از دستورهای ()history.back و ()history.forward فقط امکان این وجود دارد که کاربران را یک صفحه به عقب یا جلو هدایت کنیم. اگر بخواهیم بازدید کننده را به چندین صفحه عقب یا جلو هدایت کنیم باید از دستور ()history.go استفاده کنیم.
1- استفاده از مقداری مثبت برای ()history.go
اگر برای دستور ()history.go از مقداری مثبت استفاده شود کاربر به همان تعداد صفحه در تاریخچه مرورگر به جلو هدایت می شود. به کد زیر توجه کنید :
کد بالا دکمه ای را می سازد که کلیک کردن بر روی آن همان کاری را انجام می دهد که سه بار فشار دادن دکمه Forward در پنجره مرورگر انجام می دهد.
در صورتی که دستور به صورت (1)history.go نوشته شود مانند دستور ()history.forward عمل می کند.
2- استفاده از مقدار صفر برای ()history.go
در صورتی که این دستور به صورت (0)history.go نوشته شود باعث باز بارگذاری مجدد همان صفحه خواهد شد. برای مثال به کد زیر و دکمه ساخته شده با آن توجه کنید :
این هم دکمه ساخته شده :
3- استفاده از مقادیر منفی برای ()history.go
اگر بخواهیم کاربر را چند صفحه در تاریخچه مرورگر به عقب هدایت کنیم می توانیم برای دستور ()history.go از مقادیر منفی استفاده کنیم. برای مثال به کد زیر توجه کنید :
این کد دکمه ای را می سازد که وقتی کاربر آنرا کلیک کند به سومین صفحه ای که قبل از صفحه کنونی در پنجره مرورگر بازدید کرده است هداین می شود. کاربرد این دکمه در اینجا مشابه سه بار فشار دادن دکمه Back در پنجره مرورگر است.
history.length
با استفاده از دستور history.lentgh می توانید تعداد صفحاتی را که در تاریخچه مرورگر وجود دارد پیدا کنید. یعنی با استفاده از این دستور می توانیم به تعداد صفحاتی که از زمان باز شدن پنجره مرورگر در آن نمایش داده شده است پی ببریم. برای مثال می توانید با کلیک کردن بر روی لینک زیر تعداد صفحات ذخیره شده در تایریخچه پنجره مرورگر خود را پیدا کنید :
ما برای نوشتن اسکرپت با استفاده از دکمه ها، ابتدا باید بدانیم چگونه می توان یک دکمه را در یک صفحه قرار داد. برای این کار شما باید از تگهای
این فرمان یک دکمه را در صفحه شما قرار می دهد، اما اگر روی آن کلیک کنید اتفاقی نمی افتد...
در زیر کار هر قسمت از فرمان بالا را می بینیم:
این قسمت یک فرم را ایجاد می کند بنابر این ما می توانیم یک دکمه بسازیم.
این تگ به ما اجازه می دهد نوعی ناحیه ورودی بسازیم.
"type="button
این فرمان ناحیه ورودی ما را به عنوان یک دکمه تعریف می کند.
"اینجا کلیک کنید"=value
این متنی است که افراد روی دکمه می بینند. شما می توانید هر چیزی را که می خواهید بینندگانتان روی دکمه ببینند اینجا بنویسید.
"name="button1
شما می توانید برای مراجعات بعدی یا احتمالاً استفاده در یک اسکرپت به دکمه خود یک نام بدهید.
احتمالاً شما نمی خواهید یک دکمه بسازید که کاری انجام نمی دهد. در زیر یک فرمان جاوا اسکرپت آورده شده است که مرورگر را مجبور می کند وقتی دکمه را کلیک کردید عکس العمل نشان دهد:
onClick="javascript command"
فقط این فرمان را در تگ INPUT قرار دهید که دکمه را با آن ساختید، مانند زیر:
برای مثال ما می توانیم مانند فرمان onMouseover در این دکمه نیز استفاده کنیم و متنی را در نوار وضعیت پنجره چاپ کنیم!
حالا دکمه را فشار دهید و به متن نوار وضعیت نگاه کنید:
شما می توانید با استفاده از دکمه ها به بینندگان خود اجازه دهید رنگ زمینه صفحه را برای خودشان تغییر دهند. فقط از فرمان زیر به جای فرمان window.status استفاده کنید:
document.bgColor='رنگ مورد نظر به زبان انگلیسی نوشته شود'
فرمان زیر را به عنوان تمرین فرمان onClick وارد کنید:
حالا شما دکمه ای مانند زیر دارید که با کلیک کردن بر روی آن زمینه صفحه به رنگ زرد در می آید!
شما می توانید به هر تعداد که می خواهید از این دکمه ها اضافه کنید، فقط مطمئن شوید که آنها گزینه بازگشت به حالت اولیه را نیز داشته باشند. اسکرپت زیر به شما چهار گزینه می دهد : سفید، زرد، قرمز و آبی . می توانید از دکمه «بازگشت به رنگ اولیه!» برای بازگرداندن تصویر زمینه این صفحه استفاده کنید. کدی که در این صفحه از آن استفاده شده است به دلیل وجود تصویر زمینه کمی با کد زیر متفاوت است ولی کارایی آن تفاوتی ندارد.
برای دکمه چهارم به جای نام رنگ از معادل هگزادسیمال رنگها استفاده شده است. برای یافتن معادل هگزادسیمال رنگها و توضیح درباره آنها می توانید به این صفحه مراجعه کنید.
حالا شما سه دکمه دارید، آنها را امتحان کنید!
در اسکرپت آخری که در این قسمت بررسی می کنیم، اجازه می دهیم تا یک دکمه به عنوان یک لینک عمل کند. به این منظور فقط فرمان زیر را برای فرمان onClick استفاده کنید:
window.location='URL'
برای مثال این هم اسکرپتی که شما را به صفحه آموزش جاوا اسکرپت ما می برد:
وقت اون رسیده که نوشتن اولین اسکرپت خود را شروع کنید. این یکی راحته چون مجبور نیستیم درگیر اضافه کردن تگهای SCRIPT شویم. این اسکرپت کوچک به دلخواه شما وقتی نشانگر ماوستان روی یک لینک قرار می گیرد متنی را در نوار وضعیت مرورگرتان می نویسد. به مثال نگاه کنید:
onMouseover="window.status='« آموزش جاوا اسکرپت »';return true">
ماوس خود را روی این لینک قرار دهید!!!
شما هم امتحان کنید و ببینید چگونه کار می کند. نشانگر ماوس خود را روی لینک زیر قرار دهید ولی کلیک نکنید (اگر کلیک کنید، چون در کد بالا آدرس لینک، آدرس همین صفحه است پس از کلیک کردن دوباره همین صفحه باز می شود). حالا پایین پنجره مرورگر خود به نوار وضعیت نگاه کنید باید این جمله را بینید: « آموزش جاوا اسکرپت »
بسیار خوب، این چیزی است که با فرمان onMouseover اتفاق می افتد:
" "=onMouseover
این شکل فرمان onMouseover است. مرورگر انتظار فرمان دیگری بین دو علامت دابل کوت ( " ) را دارد.
'« آموزش جاوا اسکرپت »'=window.status
این فرمان به مرورگر میگوید که جمله ای را در نوار وضعیت بنویسد. شما می توانید جمله بین دو علامت ( ' ) را با آنچه که می خواهید در نوار وضعیت به نمایش در آید جابجا کنید.
return true
عبارت را تأیید کرده و مرورگر آن را نمایش می دهد.
دلیل استفاده از علامت سینگل کوت ( ' ) در فرمان window.status این است که window.status خود قسمتی از فرمان onMouseover است که از ( " ) استفاده کرده است. اگر دوباره از علامت دابل کوت ( " ) استفاده کرده بودیم ممکن بود مرورگر در مورد اینکه چه کاری باید انجام دهد گیج می شد. چون ممکن بود علامت دابل کوت دوم را به منزله پایان فرمان onMouseovr تلقی کند و فرمان جدیدی را با window.status شروع کند: onMouseover=""window.statuse
مشکلی که ممکن است در اینجا به وجود آید پاک نشدن متنی است که می خواستید در نوار وضعیت نمایش داده شود. دو راه برای از بین بردن این مشکل وجود دارد. یکی استفاده از فرمان onMouseout است، و دیگری فرا خواندن تابعی که متن را پس ار مدتی پاک می کند. راه دوم نیازمند استفاده از توابع و اسکرپت تگها است. در اینجا آسانترین راه را به شما نشان می دهم: استفاده از فرمان onMouseout :
onMouseover="window.status='متن خود را اینجا قرار دهید'; return true"
onMouseout="window.status=' '; return true">
لینک خود را اینجا قرار دهید
این فرمان متن نوار وضعیت را وقتی که نشانگر ماوس روی آن نیست ناپدید می کند. مانند زیر:
در حقیقت ما همان کار قبل را تکرار کردیم ولی به جای متن از فضای خالی در فرمان window.status استفاده کردیم.
این اسکرپت جالب و مفید است و می تواند به بازدید کنندگان صفحه شما کمک کند تا بهتر بدانند لینک آنها را به چه صفحه ای می برد. و می توانند توضیحات شما را در مورد لینک ببینند.
با استفاده از دستور if امکان این وجود دارد که برنامه را حداکثر به یکی از دو جهت ممکن هدایت کنیم. یعنی اگر شرط مورد نظر برقرار بود اسکرپت یک سری کد را اجرا می کند و در صورت عدم برقراری شرط یک سری کد دیگر اجرا می شود. اگر بخواهیم برای اسکرپت خود مسیرهای بیشتری در نظر بگیریم یک راه موجود استفاده از دستورات if تو در تو است. این روش ممکن است در موارد جزئی کارایی داشته باشد اما اگر تعداد شرطها زیاد شود ما را مجبور می کند از تعداد زیادی if و else در اسکرپت خود استفاده کنیم که این مسئله هم باعث طولانی شدن برنامه و هم باعث گیج کننده شدن آن می شود از طرفی امکان اشتباه را هم بالا می برد.
راه حل دیگر استفاده از دستور شرطی switch است. این دستور را می توان در هنگامی که می خواهیم یک متغیر را با چندین مقدار مقایسه کنیم و مقدار متناسب با آنرا پیدا کنیم کار برد دارد. ساختار این دستور به صورت زیر است :
switch(x)
{
case مقدار اول:
این کد در صورت برابری متغیر x با مقدار اول اجرا می شود
break
case مقدار دوم:
این کد در صورت برابری متغیر x با مقدار دوم اجرا می شود
break
default:
این کد در صورتی اجرا می شود که مقدار متغیر x با هیچکدام از مقادیر ذکر شده برابر نباشد
}
در این دستور مقدار متغیر معرفی شده در قسمت switch با مقادیر آورده شده در هر case مقایسه می شود. در صورت مساوی بودن مقادیر کد همان case اجرا می شود و با استفاده از دستور break آورده شده در هر قسمت برنامه پس از اجرای کد آن قسمت به خارج از دستور switch هدایت می شود. در غیر این صورت برنامه به سراغ case بعدی می رود و در صورتی که مقدار متغیر مورد نظر با هیچکدام از case ها برایر نبود کد قسمت default اجرا خواهد شد.
قابل ذکر است که استفاده از default اختیاری است و شما بنا به نیاز خود می توانید از آن استفاده کرده یا آنرا حذف کنید.در دستور switch محدودیتی در تعدار case ها وجود ندارد و می توانید به هر تعدادی که نیاز داری از این مورد استفاده کنید.
در این قسمت به ذکر یک نمونه برای ادستور switch می پردازیم :
به کدی که در اینجا آورده شده است توجه کنید. پس از جرای این کد کادری باز می شود که از شما میخواهد عددی را وارد کنید. با وارد کردن عدد در این کادر و تأیید آن پیامی متناسب با روز معادل آن عدد در هفته ظاهر می شود. البته ما این کار را فقط برای اعداد 1 تا 3 انجام دادیم، شما در صورت تمایل می توانید آنرا تکمیل کنید :
var x=prompt('لطفاً یک عدد بین 1 تا 7 وارد کنید :',' ');
switch (x) {
case '1':
alert('شماره وارد شده مربوط به روز « شنبه » است');
break
case '2':
alert('شماره وارد شده مربوط به روز « یکشنبه » است');
break
case '3':
alert('شماره وارد شده مربوط به روز « دوشنبه » است');
break
case '4':
alert('شماره وارد شده مربوط به روز « سه شنبه » است');
break
case '5':
alert('شماره وارد شده مربوط به روز « چهارشنبه » است');
break
case '6':
alert('شماره وارد شده مربوط به روز « پنجشنبه » است');
break
case '7':
alert('شماره وارد شده مربوط به روز « جمعه » است');
break
default:
alert('روز مربوط به شماره وارد شده در این برنامه وجود ندارد');
}
در جاوا اسکرپت این امکان وجود دارد که متنی را نوشته و در صفحه نمایش بدهیم. متن مورد نظر را می توانیم قالب بندی کنیم و از تگهای HTML نیز در آن استافده کنیم. برای این کار از فرمان ()document.write استفاده می کنیم که یک فرمان جاوا اسکرپت مخصوص چاپ کردن خروجی در صفحه است. روش کار به صورت زیر است :
نوشتن متنهای ساده
البته نقطه ویرگولی که در آخر فرمان نوشته شده تنها در صورتی الزامی است که بیش از یک فرمان در اسکرپت خود داشته باشیم.
برای نوشتن متن به این صورت کافی است تا فرمان بالا را در جایی از صفحه HTML که می خواهید متن به نمایش در آید بنویسید. در مثال زیر متنی با استفاده از جاوا اسکرپت در صفحه نمایش داده می شود، برای مشاهده مثال لینک زیر را کلیک کنید :
با استفاده از فرمان document.write امکان نوشتن متنهای قالب بندی شده با استفاده از تگهای HTML هم وجود دارد. برای اینکار فقط کافیست متن HTML مورد نظر خود را در تابع ()document.write قرار دهید. برای مثال به کد زیر توجه کنید :
برای مشاهده نتیجه این مثال لینک زیر را کلیک کنید :
اگر بخواهیم متنی که با استفاده از جاوا اسکرپت متنی را بنویسیم که در صفحه در چند سطر نمایش داده شود به راحتی می توانیم با وارد کردم در متن مورد نظر یا با سایر تگهای HTML این کار را انجام دهیم. اما اگر بخواهیم مقداری را که به تابع ()document.write می دهیم در چند سطر وارد کنیدم باید مقدار مورد نظر را در هر سطر از هم جدا کرده و با استفاده از عملوند رشته ای + آنها را در چند سطر به هم پیوند بزنیم.
نکته : نباید بدون استفاده از عملگر های مربوطه مقدار تابع بالا را در بیش از یک سطر بنویسید. در صورتی که متن مورد نظر خود را به این گونه در چند سطر بنویسید تابع کار نمی کند و احتمالاً با پیغام خطا مواجه می شوید.
اگر کد خود را به صورت زیر بنویسید با خطا مواجه خواهید شد :
برای اینکه با خطا مواجه نشوید و کد شما کار حود را انجام دهد باید آنرا به صورت زیر بنویسید :
در جاوا اسکرپت برای جمع، تفریق، مقایسه و بسیاری از عملیات دیگر از عملگرها استفاده می کنیم. عملگرها به چند دسته تقسیم می شوند : عملگرهای محاسباتی، مقایسه ای، جایگزینی، منطقی، رشته ای، و شرطی. در ادامه به ارائه توضیحاتی برای هر نوع از این عملگرها خواهیم پرداخت.
عملگرهای محاسباتی
از این نوع عملگرها برای انجام عملیات ریاضی نظیر جمع و ضرب استفاده می شود. می توانید این عملگرها را در اینجا مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :
نام
عملگر
مثال
نتیجه
جمع
+
x + y
12
تفریق
-
x - y
4
ضرب
*
x * y
32
تقسیم
/
x / y
2
باقیمانده
%
9 % y
1
افزایش
++
x++
9
کاهش
--
x--
7
از عملگرهای افزایش و کاهش به ترتیب برای افزودن 1 به مقدار قبلی و کم کردن 1 از مقدار قبلی استفاده می شود.
عملگرهای جایگزینی
این عملگرها ترکیبی از عملگرهای دیگر هستند و به همین دلیل آنها را عملگرهای ترکیبی هم می نامند. می توانید این عملگرها را در جدول زیر مشاهده کنید ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :
نام
عملگر
مثال
عبارت معادل
انتساب
=
x = 8
x = 8
انتساب جمع
+=
x += y
x = x + y
انتساب تفریق
-=
x -= y
x = x - y
انتساب ضرب
*=
x *= y
x = x * y
انتساب تقسیم
/=
x /= y
x = x / y
انتساب باقیمانده
%=
x %= y
x = x % y
عملگرهای مقایسه ای
از این عملگرها برای مقایسه دو مقدار استفاده می شود که شامل عملگرهای زیر هستند.
در جدول زیر مقادیر x و y و z را مطابق زیر در نظر بگیرید و توجه داشته باشید که مقدار متغیرهای x و y عددی و مقدار متغیر z از نوع رشته ای است :
x = 4;
y = 8;
z = "4";
نام
عملگر
مثال
نتیجه
تساوی
==
x == z
True
همانی
===
x === z
False
نامساوی
!=
x != y
True
بزرگتر از
>
x > y
False
کوچکتر از
<
x < y
True
بزرگتر یا مساوی
>=
x >= z
True
کوچکتر یا مساوی
<=
x <= y
True
تفاوت عملگر تساوی با عملگر همانی در این است که در عملگر تساوی نوع متغیر ها در نظر گرفته نمی شود و اگر مقدار متغیرها با هم برابر باشد حتی اگر از یک نوع هم نباشند نتیجه True خواهد بود. ولی در عملگر همانی باید متغیرها مقداری مساوی داشته باشند و از یک نوع هم باشند تا نتیجه True باشد.
عملگرهای منطقی
این عملگرها برای انجام عملیات منطقی بر روی دو عبارت به کار می روند ( در مثال زیر متغیر x را برابر 8 و متغیر y را برابر 4 در نظر بگیرید ) :
نام
عملگر
مثال
نتیجه
نقیض
!
!(x==y)
True
!(y==3)
False
و
&&
(x=4 && y=8)
True
(x>4 && y=8)
False
یا
||
(x>4 || y=8)
True
(x>4 || y>8)
False
عملگر رشته ای
از این عملگر برای چسباندن دو رشته به هم استفاده می شود. مثلاً برای اتصال دو متغیر از نوع رشته از این عملگر استفاده می شود.
نام
عملگر
مثال
عملوند رشته ای
+
a = 'طراحی وب';
b = 'با جاوا اسکرپت';
c = a+b;
در مثال بالا مقدار متغیر c این است : 'طراحی وببا جاوا اسکرپت'
برای ایجا فاصله بین کلمه وب و کلمه با می توانیم یک فاصله خالی به یکی از متغیرهای a یا b اضافه کنیم یا با استفاده از عملوند رشته ای یک فضای خالی به متغیر c اضافه کنیم :
a = ' طراحی وب';
b ='با جاوا اسکرپت';
c = a+b;
------------------------------
a = 'طراحی وب';
b ='با جاوا اسکرپت';
c = a+' '+b;
در نتیجه کد بالا مقدار متغیر c به این صورت خواهد بود : 'طراحی وب با جاوا اسکرپت'
عملگر شرطی
در جاوا اسکرپت نوعی عملگر وجود دارد که بسته به شرایط مقداری را به یک متغیر تخصیص می دهد به این عملگر عملگر شرطی می گویند. ساختار این عملگر به صورت زیر است :
VAR_NAME=(شرط)?value1:value2
این عملگر در صورتی که شرط برقرار باشد مقدار اول را به متغیر می دهد و در صورت برقرار نبودن شرط مقدار دوم را به متغیر تخصیص می دهد. به مثال زیر توجه کنید :
age_group=(age>18)?'زیر سن بلوغ':'بزرگسال'
در این مثال اگر متغیر age بزرگتر از 18 باشد مقدار 'بزرگسال' به متغیر age_group تخصیص داده می شود و در صورتی که متغیر age کوچکتر از 18 باشد مقدار 'زیر سن بلوغ' به عنوان مقدار متغیر age_group قرار می گیرد.
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
